// 分类业务相关代码
import { getReclassifyAPI } from '@/api/layout';
import { ref, onMounted, watch } from 'vue'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'

export function useCategory() {
    const reclassify = ref({})
    const route = useRoute()

    const getReclassify = async (id = route.params.id) => {
        const { data: res } = await getReclassifyAPI(id)
        if (res.code !== '1') return ElMessage.error(res.msg)
        reclassify.value = res.result
    }
    onMounted(() => {
        getReclassify()
    })

    //解决路由更新但请求未重新发送  原因：RouterLink 是被内存缓存的，但被缓存时，生命周期无法被重新调用
    // 方法一、监听路由变化
    // watch(route, () => {
    //     getReclassify()
    // })
    //方法二、 onBeforeRouteUpdate ：当路由发生更新时，执行函数
    onBeforeRouteUpdate((to) => {
        // 存在问题：路由更新但路由信息不一致
        //使用最新的路由参数请求接口重新发送
        getReclassify(to.params.id)
    })

    return{
        reclassify
    }
}